<template>
  <div>
    <h1>作用域插槽使用场景</h1>
    <hr />
    <Tb :arr="arr">
      <template #img="obj">
        <img :src="obj.src" />
      </template>
    </Tb>
    <Tb :arr="arr">
      <template #img="{ src }">
        <h2 style="color: blue">{{ src }}</h2>
      </template>
    </Tb>
  </div>
</template>

<script>
import Tb from "./components/table.vue";
export default {
  components: {
    Tb,
  },
  data() {
    return {
      arr: [
        {
          name: "小传同学",
          age: 18,
          headImgUrl: "https://gitee.com/mengi/imgs/raw/master/img/1.jpeg",
        },
        {
          name: "小黑同学",
          age: 25,
          headImgUrl: "https://gitee.com/mengi/imgs/raw/master/img/3.jpeg",
        },
        {
          name: "智慧同学",
          age: 21,
          headImgUrl: "https://gitee.com/mengi/imgs/raw/master/img/4.jpeg",
        },
      ],
    };
  },
};
</script>

<style scoped>
img {
  width: 250px;
  height: 250px;
}
</style>